<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人资料</title>
    <link rel="stylesheet" href="iceui/src/ui/ui.css" />
    <link rel="stylesheet" href="css/adminXL.css">
    <link rel="stylesheet" href="layui/css/layui.css" />
    <link rel="stylesheet" href="css/Personal.css" />
    <script src="iceui/src/ice.js"></script>
    <script src="iceui/src/ui/ui.js"></script>
    <script src="iceui/src/popup/icePopup.js"></script>
    <script src="js/adminXL.min.js"></script>
    <script src="layui/layui.js"></script>
    <script src="js/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .title {
            font-size: 20px;
            color: rgb(14, 0, 0);
        }

        .tree-alone {
            height: 50px;
            line-height: 30px;
        }
    </style>
</head>

<body>
    <div class="layui-row layui-col-space5">
        <div class="layui-col-md4">
            <div class="grid-demo grid-demo-bg1" style="width:375.7px;height:740px;">
                <div class="left" style="width:375.7px;height:100%;display:inline-block;">
                    <div class="adminXL-sidebar close"
                        style="background-color:white;border-right: 1px solid rgb(196, 196, 196);width:375.7px;">
                        <div class="layui-col-xs2" style="width: 375.7px;height: 100px;">
                            <div class="grid-demo grid-demo-bg1">
                                <a href="page/home.html" class="adminXL-logo-web"
                                    style="position: fixed;top: 30px;left: 130px;">
                                    <img src="img/彩云里Logo.jpg" class="logo" alt="RainbowCloud"
                                        style="width: 60px;height:50px;">
                                </a>
                            </div>
                        </div>
                        <ul id="Menu-tree" class="adminXL-sidebar-menu" style="width:375.7px;">
                            <li class="tree-alone">
                                <a href="Home.html">
                                    <i class="icon ice-home"></i>
                                    <span class="title">主页</span>
                                </a>
                            </li>
                            <li class="tree-alone">
                                <a href="#" onclick="window.location='Main.html'">
                                    <i class="icon ice-expand"></i>
                                    <span class="title">探索</span>
                                </a>
                            </li>
                            <li class="tree-alone">
                                <a href="#">
                                    <i class="layui-icon layui-icon-notice" style="padding-left:4px;"></i>
                                    <span class="title" style="margin-left:20px;">通知</span>
                                </a>
                            </li>
                            <li class="tree-alone">
                                <a href="#">
                                    <i class="icon ice-message"></i>
                                    <span class="title">私信</span>
                                </a>
                            </li>
                            <li class="tree-alone">
                                <a href="#">
                                    <i class="icon ice-order-out"></i>
                                    <span class="title">列表</span>
                                </a>
                            </li>
                            <li class="tree-alone">
                                <a href="#">
                                    <i class="icon ice-mass"></i>
                                    <span class="title">社群</span>
                                </a>
                            </li>
                            <li class="tree-alone">
                                <a href="#">
                                    <i class="icon ice-category"></i>
                                    <span class="title">Premium</span>
                                </a>
                            </li>
                            <li class="tree-alone" style="font-weight:bold;">
                                <a id="PersonInfo">
                                    <i class="icon ice-user"></i>
                                    <span class="title">个人资料</span>
                                </a>
                            </li>
                            <li class="tree-alone">
                                <a href="#">
                                    <i class="icon ice-computer"></i>
                                    <span class="title">更多</span>
                                </a>
                            </li>
                            <button type="button" id="test"
                                class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius layui-bg-blue"
                                style="width: 200px;height: 50px;margin-left:40px;" id="aa">发帖</button>
                            <div class="userinfo"
                                style="width:243.8px;height:65.26px;margin-left:105px;margin-top:35px;border-radius:30px;display:inline-block;">
                                <div class="userimage"
                                    style="width:220px;height:45px;margin-top:9px;margin-left:9px;display:inline-block;">
                                    <img id="useravatar" style="width:45px;height:45px;border-radius:50%;">
                                    <span style="position:absolute;top:665px;left:170px;font-size:15px;color:#0F1419"
                                        id="nickname"></span>
                                    <span style="position:absolute;top:687px;left:170px;font-size:15px;color:#536471;"
                                        id="username"></span>
                                    <i class="icon ice-dropdown" style="margin-left:132px;"></i>
                                </div>
                            </div>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4" id="container">
            <div class="grid-demo" style="width:598.4px;margin-left:-122px;">
                <div class="top">
                    <div class="return" onclick="javascript:window.history.back();"><i
                            class="layui-icon layui-icon-return"></i> </div>
                    <div class="marname">
                        <div class="name">{{ personinfo.userinfo.nickname }}</div>
                        <div class="postcount">{{ postcount }} 帖子</div>
                    </div>
                </div>
                <div class="bottom">
                    <div class="background"></div>
                    <img class="infoAvatar" :src="'data:image/png;base64,' + personinfo.avatar">
                    <div class="userinfo">
                        <div class="persondata">
                            <div><button type="button" class="layui-btn layui-btn-normal layui-btn-radius"
                                    style="background-color:#ffffff;" v-if="isSelf">设置个人资料</button>
                                <button class="layui-btn layui-bg-blue layui-btn-radius followbtn"
                                    @click.stop="Follow()" v-if="!isSelf">{{ isFollow ?
                                    "取消关注" : "关注" }}</button>
                            </div>
                        </div>
                        <div class="personame">
                            <div class="personick">{{ personinfo.userinfo.nickname }}</div>
                            <div class="personuser">@{{ personinfo.username }}</div>
                        </div>
                        <span class="personbio" v-if="personinfo.userinfo.bio">{{ personinfo.userinfo.bio }}</span>
                        <div class="createtime">
                            {{personinfo.registrationtime.date.year}}年{{ personinfo.registrationtime.date.month
                            }}月加入</div>
                        <div class="attention"><a>{{ followers }} <span
                                    class="beingattention">正在关注</span></a>&nbsp;&nbsp;&nbsp;&nbsp;<a>{{
                                followees }} <span class="personattention">关注者</span></a></div>
                        <div class="liebiao">
                            <ul class="message">
                                <li class="choice" @click="showPage('post')">帖子</li>
                                <li class="choice" @click="showPage('commentPost')" id="replybtn">回复</li>
                                <li class="choice">亮点</li>
                                <li class="choice">文章</li>
                                <li class="choice">媒体</li>
                                <li class="choice" @click="showPage('likesPost')">喜欢</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--帖子页-->
                <div v-if="currentPage === 'post'">
                    <div class="list-group layui-anim" v-for="post in postlist" :key="post.pid" :id="post.pid"
                        @click="ViewPost(post.pid)">
                        <img class="avatar" :src="'data:image/png;base64,' + post.publishaccountInfo.avatar">
                        <span class="nickname">{{ post.userinfo.nickname }}</span>
                        <span class="username">@{{ post.publishaccountInfo.username }}</span>
                        <time class="post-time" :datetime="post.ptime">{{ FormatDate(post) }}</time>
                        <button class="layui-btn layui-btn-primary demo-dropdown-on icon-gd"
                            lay-options="{trigger: 'hover'}" id="gd" v-if="isSelf">
                            <i class="layui-icon layui-icon-more-vertical layui-font-12"></i>
                        </button>
                        <p class="content" v-html="UTF16Tocontent(post.pcontent)"></p>
                        <div class="imgvideo" v-if="post.pimage || post.pvideo">
                            <div class="img" v-if="post.pimage">
                                <img class="image" :src="'data:image/png;base64,' + post.pimage">
                            </div>
                            <div class="videos" v-if="post.pvideo">
                                <video class="video" :src="'http://169.254.202.137:8080/' + post.pvideo"
                                    controls></video>
                            </div>
                        </div>
                        <div class="info">
                            <i class="like" :class="likeClass"></i>
                            <span class="infotext">{{ post.likes }}</span>
                            <i class="icon ice-message"></i>
                            <span class="infotext">{{ post.commentscount }}</span>
                        </div>
                    </div>
                    <!-- {{ post.pid }} -->
                </div>
                <!--回复页-->
            </div>
            <div class="replycomment" v-if="currentPage === 'commentPost'">
                <div class="comment" v-for="cp in commentPost" :key="cp.id" @click="ViewPost(cp.pid)">
                    <div class="commentks">
                        <img class="avatar" :src="'data:image/png;base64,' + cp.publishaccountInfo.avatar">
                        <span class="nickname">{{ cp.userinfo.nickname }}</span>
                        <span class="username">@{{ cp.publishaccountInfo.username }}</span>·
                        <time class="post-time" :datetime="cp.ptime">{{ FormatDate(cp) }}</time>
                        <p class="content" v-html="UTF16Tocontent(cp.pcontent)"></p>
                        <div class="imgvideo" v-if="cp.pimage || cp.pvideo">
                            <div class="img" v-if="cp.pimage">
                                <img class="image" :src="'data:image/png;base64,' + cp.pimage">
                            </div>
                            <div class="videos" v-if="cp.pvideo">
                                <video class="video" :src="'http://169.254.202.137:8080/' + cp.pvideo" controls></video>
                            </div>
                        </div>
                        <div class="info">
                            <i class="like" :class="likeClass" @click.stop="cp.pid"></i>
                            <span class="infotext">{{ cp.likes }}</span>
                            <i class="icon ice-message"></i>
                            <span class="infotext">{{ cp.commentscount }}</span>
                        </div>
                    </div>

                    <div class="commentrep">
                        <img class="avatar reply-avatar"
                            :src="'data:image/png;base64,' + cp.comments[0].publishaccountInfo.avatar">

                        <span>{{cp.comments[0].userinfo.nickname}}</span>
                        <span>@{{cp.comments[0].publishaccountInfo.username}}</span>
                        <time class="post-time" :datetime="cp.ptime">{{ FormatDate(cp.comments[0]) }}</time>
                        <p class="content" v-html="UTF16Tocontent(cp.comments[0].pcontent)"></p>
                        <div class="info">
                            <i class="like" :class="likeClass" @click.stop="cp.pid"></i>
                            <span class="infotext">{{ cp.likes }}</span>
                            <i class="icon ice-message"></i>
                            <span class="infotext">{{ cp.commentscount }}</span>
                        </div>
                    </div>

                </div>
            </div>
            <!--喜欢页-->
            <div class="likecomment" v-if="currentPage === 'likesPost'">
                <div class="love" v-for="likes in likesPost" :key="likes.id" @click="ViewPost(likes.pid)">
                    <img class="avatar" :src="'data:image/png;base64,' + likes.publishaccountInfo.avatar">
                    <span class="nickname">{{ likes.userinfo.nickname }}</span>
                    <span class="username">@{{ likes.publishaccountInfo.username }}</span>·
                    <time class="post-time" :datetime="likes.ptime">{{ FormatDate(likes) }}</time>
                    <p class="content" v-html="UTF16Tocontent(likes.pcontent)"></p>
                    <div class="imgvideo" v-if="likes.pimage || likes.pvideo">
                        <div class="img" v-if="likes.pimage">
                            <img class="image" :src="'data:image/png;base64,' + likes.pimage">
                        </div>
                        <div class="videos" v-if="likes.pvideo">
                            <video class="video" :src="'http://169.254.202.137:8080/' + likes.pvideo" controls></video>
                        </div>
                    </div>
                    <div class="info">
                        <i class="like" :class="likeClass" @click.stop="likes.pid"></i>
                        <span class="infotext">{{ likes.likes }}</span>
                        <i class="icon ice-message"></i>
                        <span class="infotext">{{ likes.commentscount }}</span>
                    </div>
                </div>
            </div>

        </div>
        <script>

            layui.use(function () {
                const urlParams = new URLSearchParams(window.location.search)
                var layer = layui.layer;
                var util = layui.util;
                var $ = layui.jquery;
                var dropdown = layui.dropdown;
                if (sessionStorage.getItem("user") != null) {
                    const user = JSON.parse(sessionStorage.getItem("user"))
                    $("#nickname").text(user.userinfo.nickname)
                    $("#username").text("@" + user.username)
                    $("#useravatar").prop("src", "data:image/png;base64," + user.avatar)
                    $("#pubuseravatar").prop("src", "data:image/png;base64," + user.avatar)
                    $("#PersonInfo").click(function () {
                        let url = 'Personal.html?uid=' + user.uid;

                        window.location.href = url;
                    })
                }

                let vm = new Vue({
                    el: '#container',
                    data: {
                        // 当前主页用户的uid
                        urlUid: '',
                        // 登录用户的信息
                        user: null,
                        // 是否是登录用户自己的主页
                        isSelf: false,
                        // 判断是否关注
                        isFollow: false,
                        // 帖子总数
                        postcount: 0,
                        // 主页用户的所有帖子
                        postlist: null,
                        followers: 0,
                        followees: 0,
                        commentPost: '',
                        likesPost: '',
                        islike: false,
                        likes: 0,
                        commentscount: 0,
                        currentPage: '',
                        personinfo: {
                            uid: '',
                            username: '',
                            nickname: '',
                            password: '',
                            avatar: '',
                            email: '',
                            aphone: '',
                            registrationtime: {
                                date: {
                                    year: '',
                                    month: '',
                                    day: ''
                                },
                                time: {
                                    hour: '',
                                    minute: '',
                                    second: '',
                                    nano: ''
                                }
                            },
                            astatus: '',
                            userinfo: {
                                useruid: '',
                                nickname: '',
                                username: '',
                                gender: '',
                                birthday: {
                                    date: {
                                        year: '',
                                        month: '',
                                        day: ''
                                    },
                                    time: {
                                        hour: '',
                                        minute: '',
                                        second: '',
                                        nano: ''
                                    }
                                },
                                location: '',
                                bio: '',

                            }
                        },
                    },
                    mounted() {
                        this.GetUrlUid();
                        this.GetUser();
                        this.GetPostCount();
                        this.checkFollow();
                        this.GetFans();
                        this.GetFollowers();
                        this.IsSelf();
                        this.GetPost();
                        this.GetPersonInfo();
                        this.GetCommentPost();
                        this.GetLikePost();
                        this.showPage('post');
                    },
                    computed: {
                        likeClass() {
                            return this.islike ? 'icon ice-heart-on like-animation' : 'icon ice-heart-off';
                        },
                    },
                    methods: {
                        showPage(page) {
                            this.currentPage = page;
                            let that = this;

                            setTimeout(() => {
                                $('.icon-gd').each(function () {
                                    dropdown.render({
                                        elem: this,
                                        data: [{
                                            title: '删除',
                                            id: 'del'
                                        }],
                                        click: function (obj, othis) {
                                            let post = $(this.elem).parent('.list-group');
                                            let pid = $(post).prop("id");
                                            $.ajax({
                                                type: 'post',
                                                url: 'http://169.254.202.137:8080/delPost?pid=' + pid,
                                                dataType: 'json',
                                                success: (res) => {
                                                    post.addClass('layui-anim-fadeout'); // 添加 fadeout 类
                                                    post.fadeOut(600, function () { // 设置淡出动画，400ms
                                                        $(this).remove(); // 动画完成后移除元素
                                                    });
                                                }
                                            });
                                        },
                                    });
                                });
                            }, 100);
                        },
                        GetUrlUid() {
                            let urlParams = new URLSearchParams(window.location.search)
                            this.urlUid = urlParams.get('uid');
                        },
                        GetUser() {
                            if (sessionStorage.getItem("user") != null) {
                                this.user = JSON.parse(sessionStorage.getItem("user"))
                            }
                        },
                        IsSelf() {
                            this.isSelf = this.urlUid == this.user.uid ? true : false;
                        },
                        Follow() {
                            if (this.user.uid === this.urlUid) {
                                layui.layer.msg('不能对自己进行此操作', { icon: 2, time: 1500 }, function () {

                                });
                                return;
                            }
                            if (this.isFollow) {
                                // 取消关注
                                this.followees--;
                                this.isFollow = false;
                                // 发送取消关注请求
                                $.ajax({
                                    url: "http://169.254.202.137:8080/UnFollow",
                                    type: "POST",
                                    data: { Follower: this.user.uid, Followee: this.urlUid },
                                    success: function (response) {

                                    },
                                    error: function (xhr, status, error) {
                                        console.error(xhr.responseText);
                                        // 在这里处理取消关注错误响应
                                    }
                                });
                            } else {
                                this.followees++;
                                this.isFollow = true;
                                // 发送关注请求
                                $.ajax({
                                    url: "http://169.254.202.137:8080/Follow",
                                    type: "POST",
                                    data: { Follower: this.user.uid, Followee: this.urlUid },
                                    success: function (response) {

                                    },
                                    error: function (xhr, status, error) {
                                        console.error(xhr.responseText);
                                        // 在这里处理关注错误响应
                                    }
                                });
                            }
                        },
                        checkFollow() {
                            $.ajax({
                                url: 'http://169.254.202.137:8080/isFollow?',
                                data: 'Follower=' + this.user.uid + '&Followee=' + this.urlUid,
                                type: 'Post',
                                dataType: 'json',
                                success: (res) => { // 使用箭头函数确保正确的 this 指向
                                    this.isFollow = res.data;
                                }
                            })
                        },
                        GetFans() {
                            $.ajax({
                                url: 'http://169.254.202.137:8080/GetFollower?',
                                data: 'Follower=' + this.urlUid,
                                type: 'Post',
                                dataType: 'json',
                                success: (res) => { // 使用箭头函数确保正确的 this 指向
                                    this.followers = res.data;
                                }
                            })
                        },
                        GetFollowers() {
                            $.ajax({
                                url: 'http://169.254.202.137:8080/GetFollowee?',
                                data: 'Followee=' + this.urlUid,
                                type: 'Post',
                                dataType: 'json',
                                success: (res) => { // 使用箭头函数确保正确的 this 指向
                                    this.followees = res.data;
                                }
                            })
                        },
                        GetPostCount() {
                            $.ajax({
                                type: 'post',
                                url: 'http://169.254.202.137:8080/GetPostCount?uid=' + this.urlUid,
                                dataType: 'json',
                                success: (res) => {
                                    this.postcount = res.data;
                                }
                            });
                        },
                        ViewPost(pid) {
                            let url = 'ViewPost.html?pid=' + pid;
                            window.location.href = url;
                        },
                        GetPersonInfo() {
                            $.ajax({
                                type: 'post',
                                url: 'http://169.254.202.137:8080/' + this.urlUid,
                                dataType: 'json',
                                success: (res) => {
                                    this.personinfo = res.data;
                                }
                            })
                        },
                        GetPost() {
                            $.ajax({
                                type: 'post',
                                dataType: 'json',
                                url: 'http://169.254.202.137:8080/GetPost/' + this.urlUid,
                                success: (res) => {
                                    this.postlist = res.data;
                                }
                            })
                        },
                        GetCommentPost() {
                            $.ajax({
                                type: 'post',
                                dataType: 'json',
                                url: 'http://169.254.202.137:8080/GetComment/' + this.urlUid,
                                success: (res) => {
                                    this.commentPost = res.data;
                                }
                            })
                        },
                        GetLikePost() {
                            $.ajax({
                                type: 'post',
                                dataType: 'json',
                                url: 'http://169.254.202.137:8080/GetLikesPost/' + this.urlUid,
                                success: (res) => {
                                    this.likesPost = res.data;
                                }
                            })
                        },
                        UTF16Tocontent(str) {
                            return str.replace(/\\u([a-fA-F0-9]{4,5})/g, function (match, grp) {
                                return String.fromCharCode(parseInt(grp, 16));
                            });
                        },
                        //时间
                        FormatDate(post) {
                            let date = new Date(post.ptime)
                            // 获取该时间的毫秒数
                            var dateMs = date.getTime();

                            // 获取当前时间的毫秒数
                            var nowMs = Date.now();

                            var dateyear = date.getFullYear();

                            var nowyear = new Date().getFullYear();

                            // 计算两个时间的差值，单位为毫秒
                            var diffMs = nowMs - dateMs;

                            // 将差值除以 1000，得到两个时间的差值，单位为秒
                            var diffSec = Math.floor(diffMs / 1000);

                            // 定义一个空字符串，用于存储拼接的结果
                            var diffStr = "";

                            // 判断差值的大小，拼接成相应的字符串
                            if (dateyear != nowyear) {
                                diffStr = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日";
                            } else if (diffSec < 60) {
                                // 如果差值小于 60 秒，显示为几秒
                                diffStr = diffSec + "秒前";
                            } else if (diffSec < 3600) {
                                // 如果差值小于 3600 秒，显示为几分钟
                                diffStr = Math.floor(diffSec / 60) + "分钟前";
                            } else if (diffSec < 86400) {
                                // 如果差值小于 86400 秒，显示为几小时
                                diffStr = Math.floor(diffSec / 3600) + "小时前";
                            } else if (diffSec < 604800) {
                                diffStr = Math.floor(diffSec / 86400) + "天前";
                            } else if (diffSec < 31536000) {
                                diffStr = date.getMonth() + 1 + "月" + date.getDate() + "日";
                            } else {
                                diffStr = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日";
                            }

                            return diffStr;
                        },

                    }
                });
            })



        </script>



        <div class="layui-col-md4">
            <div class="grid-demo grid-demo-bg1" style="width:502px;margin-left:91px;">1/3</div>
        </div>
    </div>
</body>

</html>